<template>
  <div>
    <div class="addimg">
      <!-- 上传图片 -->
      <van-uploader :before-read="beforeRead" :after-read="afterRead"/>
      <p>添加照片</p>
    </div>
    <!-- 分割作用 -->
    <div class="bottom-1"></div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Uploader } from 'vant';

  Vue.use(Uploader);
  export default {
    name:'Addimg',
    methods: {
      // 返回布尔值
      beforeRead(file) {
        if (file.type !== 'image/jpeg') {
          Toast('请上传 jpg 格式图片');
          return false;
        }

        return true;
      },
        afterRead(file) {
          // 此时可以自行将文件上传至服务器
          console.log(file);
        },
      // 返回 Promise
      asyncBeforeRead(file) {
        return new Promise((resolve, reject) => {
          if (file.type !== 'image/jpeg') {
            Toast('请上传 jpg 格式图片');
            reject();
          } else {
            resolve();
          }
        });
      }
    }
  }
</script>

<style>
  .addimg{
    width: 100%;
    text-align: center;
    margin: 2rem 0;
  }
  .bottom-1{
    width: 100%;
    height: 1rem;
    background-color: #F8F8FF;
  }
</style>
